<template>
  <div id="dplayer" class="dplayer video-box"></div>
</template>

<script setup lang="ts">
import Hls from 'hls.js';  // 用于播放 HLS 格式
import Flv from 'flv.js';  // 用于播放 FLV 格式
import DPlayer, { DPlayerEvents } from 'dplayer';
import { address } from '../../base/address';
import { ref, onMounted, defineProps, watch } from 'vue';

const t = defineProps(['channelKey']);

watch(t, () => {
  if (t.channelKey) {
      loadVideo();
  }
});
let dp:DPlayer;
const loadVideo = () => {
  dp = new DPlayer({
      container: document.getElementById('dplayer'), // 播放器容器元素
      autoplay: false, // 是否自动播放
      live: true, // 是否直播
      theme: '#b7daff', // 主题色
      loop: false, // 是否循环播放
      lang: 'zh-cn', // 语言
      hotkey: true, // 开启热键
      preload: 'auto', // 视频预加载
      volume: 0, // 初始化音量
      playbackSpeed: [0.5, 1, 2, 4, 8], // 播放速度
      mutex: false, // 互斥
      preventClickToggle: true, // 阻止点击切换播放/暂停
      video: {
          pic: '', // 视频封面
          url: address.liveUrl + t.channelKey + '.flv', // 视频链接
          type: 'customFlv', // 自定义类型
          customType: {
              customFlv: function (video, player) {
                  const flvPlayer = Flv.createPlayer({
                      type: 'flv',
                      url: video.src,
                  });
                  flvPlayer.attachMediaElement(video);
                  flvPlayer.load();
              },
          },
      },
  });

  dp.volume(0, true, true); // 初始化音量设为0

  dp.on('loadedmetadata' as DPlayerEvents, function () {
      dp.play();
  });

  dp.on('error' as DPlayerEvents, function () {
      if (document.getElementById('dplayer')) {
          let time = Number(Math.round(dp.video.currentTime + 1));
          loadVideo();
          dp.seek(time);
      }
  });
};

onMounted(() => {
  
})


</script>

<style scoped>
  .video-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }


:deep(.dplayer-menu, .dplayer-mask) {
  display: none !important;
}
</style>